WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > 2D Chart Types > The 100% Stacked Mountains Type
The 100% Stacked Mountains Type

100% Stacked Mountains are provided by the StackedMountainRenderableSeries type, when StackedMountainRenderableSeries.IsOneHundredPercent = true. This shares many of the properties with the FastMountainRenderableSeries type, with the added feature that mountains automatically stack (aggregate Y-values).

Examples for the 100% Stacked Mountain Chart can be found in the SciChart WPF Examples Suite which can be downloaded from the SciChart Website or our SciChart.WPF.Examples Github Repository.

 

To declare a 100% StackedMountainRenderableSeries, use the following code:

Declare a 100% StackedMountainRenderableSeries in Xaml / Code Behind

Declare a 100% StackedMountainRenderableSeries
Copy Code 
<Grid>
       <Grid.Resources>
             <LinearGradientBrush x:Key="chartFill1" StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Offset="0" Color="#DDDBE0E1" />
                    <GradientStop Offset="1.0" Color="#88B6C1C3" />
             </LinearGradientBrush>

             <LinearGradientBrush x:Key="chartFill0" StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Offset="0" Color="#DDACBCCA" />
                    <GradientStop Offset="1.0" Color="#88439AAF" />
             </LinearGradientBrush>
       </UserControl.Resources>

       <!--  Create the chart surface  -->
       <s:SciChartSurface Name="sciChart">

             <!--  Declare RenderableSeries  -->
             <s:SciChartSurface.RenderableSeries>
                    <s:StackedMountainRenderableSeries x:Name="mountainSeries1"
                           Fill="{StaticResource chartFill0}"
                          Stroke="#EEE"                                                             StrokeThickness="2"
                           IsOneHundredPercent="True"/>
                    <s:StackedMountainRenderableSeries x:Name="mountainSeries2"
                           Fill="{StaticResource chartFill1}"
                           Stroke="#EEE"
                           StrokeThickness="2"
                           IsOneHundredPercent="True"/>
             </s:SciChartSurface.RenderableSeries>

             <!--  Create an X Axis  -->
             <s:SciChartSurface.XAxis>
                    <s:NumericAxis/>
             </s:SciChartSurface.XAxis>

             <!--  Create a Y Axis with GrowBy  -->
             <s:SciChartSurface.YAxis>
                    <s:NumericAxis/>
             </s:SciChartSurface.YAxis>

       </s:SciChartSurface>
</Grid>

 
Declare a 100% StackedMountainRenderableSeries
Copy Code 
// Code Behind, e.g. in OnLoaded event handler, set the DataSeries
var yValues1 = new[] { 4.0, 7,  5.2,  9.4,  3.8,  5.1, 7.5,  12.4 }; 
var yValues2 = new[] { 15.0, 10.1, 10.2, 10.4, 10.8, 1.1, 11.5, 3.4 };

var dataSeries1 = new XyDataSeries<double, double>() { SeriesName = "data1" };
var dataSeries2 = new XyDataSeries<double, double>() { SeriesName = "data2" }; ;

for (int i = 0; i < yValues1.Length; i++) dataSeries1.Append(i, yValues1[i]);
for (int i = 0; i < yValues2.Length; i++) dataSeries2.Append(i, yValues2[i]);

using (this.sciChart.SuspendUpdates())
{
       this.mountainSeries1.DataSeries = dataSeries1;
       this.mountainSeries2.DataSeries = dataSeries2;
}

Declare a 100% StackedMountainRenderableSeries in Pure Code

Declare a 100% StackedMountainRenderableSeries
Copy Code 
var sciChartSurface = new SciChartSurface();
// Assumes X,y Axis have been declared
var mountainSeries1 = new StackedMountainRenderableSeries()
{
       StrokeThickness = 2,
       AntiAliasing = true,
       Stroke = Color.FromArgb(0xFF, 0xAA, 0xAA, 0xAA),
       Fill = new SolidColorBrush(Colors.LightSteelBlue),
       ZeroLineY = 0.0,
       IsOneHundredPercent = true,
};
var mountainSeries2 = new StackedMountainRenderableSeries()
{
       StrokeThickness = 2,
       AntiAliasing = true,
       Stroke = Color.FromArgb(0xFF, 0xAA, 0xAA, 0xAA),
       Fill = new SolidColorBrush(Colors.LightSteelBlue),
       ZeroLineY = 0.0,
       IsOneHundredPercent = true,
};
sciChartSurface.RenderableSeries.Add(mountainSeries1);
sciChartSurface.RenderableSeries.Add(mountainSeries2);

var yValues1 = new[] { 4.0,  7,    5.2,  9.4,  3.8,  5.1, 7.5,  12.4, 14.6, 8.1, 11.7, 14.4, 16.0, 3.7, 5.1, 6.4, 3.5, 2.5, 12.4, 16.4, 7.1, 8.0, 9.0 };
var yValues2 = new[] { 15.0, 10.1, 10.2, 10.4, 10.8, 1.1, 11.5, 3.4,  4.6,  0.1, 1.7, 14.4, 6.0, 13.7, 10.1, 8.4, 8.5, 12.5, 1.4, 0.4, 10.1, 5.0, 0.0 };

var dataSeries1 = new XyDataSeries<double, double>() { SeriesName = "data1" };
var dataSeries2 = new XyDataSeries<double, double>() { SeriesName = "data2" }; ;

for (int i = 0; i < yValues1.Length; i++) dataSeries1.Append(i, yValues1[i]);
for (int i = 0; i < yValues2.Length; i++) dataSeries2.Append(i, yValues2[i]);

using (this.sciChart.SuspendUpdates())
{
       mountainSeries1.DataSeries = dataSeries1;
       mountainSeries2.DataSeries = dataSeries2;
}
NOTE: You can also declare RenderableSeries using full MVVM (series ViewModels). Please see MVVM DataSeries / RenderableSeries API for more details.

How the Stacking and Grouping Works

Please see the section under Stacked Mountain series > “How the Stacking and Grouping Works” for a detailed explanation.

Limitations of Stacked Series

When using any Stacked Series type, there are a few important limitations to keep in mind to ensure correct rendering and behavior:

  1. Consistent X-Values Across Series
    All series within a stacking group must share the same X-values – meaning the collections must be of equal length and contain identical values in the same order. This requirement ensures that columns are stacked properly and aligned accurately on the X-axis
  2. X-Values Must Be Valid Numeric Values
    The X-values used in stacked column charts must be valid, finite numeric values. Special values such as Double.NaN, Double.PositiveInfinity, or Double.NegativeInfinity are not supported and will lead to undefined behavior or rendering issues
  3. Representing Gaps in Series
    If you need to represent missing data or create gaps in individual series (e.g., when one series has fewer data points than the others), assign Double.NaN or Float.NaN to the corresponding Y-values instead. This tells SciChart to omit rendering the column at that position while preserving the required structure of matching X-values across the group

See Also
WPF Dashboard Style Column Charts Example